<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float布局</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .b {
            width: 100px;
            height: 100px;
            background-color: green;
            float: right;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        img {
            float: left;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2 {
            width: 200px;
            /* height: 200px; */
            background-color: blue;
        }
        .box2::after{
            content: "";
            display: block;
            clear: both;
        }
        .box3 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .left{
            width: 50px;
            height: 50px;
            background-color: pink;
            float: left;
        }
        .right{
            width: 50px;
            height: 50px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <!-- <div class="a"></div>
    <span>孤独娱乐</span> -->
    <!-- <div class="b"></div> -->
    <!-- <img src="../img/baidu_logo.png" alt="">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam dignissimos eos, aut, laborum error similique fugit minima perspiciatis fugiat maxime magni beatae quisquam iusto ducimus! Harum dolor culpa ea veniam!
    Totam, debitis hic fugiat minima culpa architecto corrupti saepe adipisci delectus amet quibusdam magnam quasi ipsum unde, mollitia tenetur nemo qui explicabo, placeat cupiditate illo reiciendis odit facilis. Architecto, necessitatibus!
    Doloremque error soluta laudantium, veniam eum exercitationem architecto eligendi adipisci dolores enim omnis est quidem aliquid numquam vero earum sit maxime ullam. Dolore cumque esse aliquam accusantium dolores nemo optio.
    Aut repellendus dolorem odit distinctio unde iure ducimus fuga hic numquam libero. Consequatur, ratione, laboriosam numquam ea quis, voluptatem esse repellat consequuntur dolore molestiae nisi sed fugit. Harum, inventore officiis.
    Ab ut quos maiores modi, velit animi iure dolor iste atque, officia quibusdam officiis molestiae dicta quam? Aliquam consequuntur dignissimos aperiam labore necessitatibus quidem id modi sint eligendi? Esse, facere?
    Necessitatibus optio nemo voluptas, possimus fugit veniam vero quas deleniti doloremque cupiditate, voluptate ea dolore dolor quos qui delectus eius hic repellendus similique. Iusto magni placeat blanditiis. Expedita, ab ratione! -->

    <div class="box1"></div>
    <div class="box2">
        <div class="left">左边盒子</div>
        <div class="right">右边盒子</div>
    </div>
    <div class="box3"></div>
</body>
</html>